<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    width="30%">
    <dynForm
      ref="form"
      :is-inline="false"
      :info-form="infoForm"
      :search-tags="searchTags"
      :form-attrin="formAttrin"
      :rules="rules" />
    <span slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button v-btnThrottle="doSave" type="primary" icon="el-icon-receiving">{{
        $t("save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import mailApi from '@/api/system/mails'
export default {
  name: 'MailForm',
  data() {
    const validEmail = (rule, value, callback) => {
      const reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (!reg.test(value)) {
        callback(new Error(this.$t('incorrectEmailAddress')))
      } else {
        callback()
      }
    }
    const validPort = (rule, value, callback) => {
      const reg = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
      if (!reg.test(value)) {
        callback(new Error(this.$t('incorRectportNumber')))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      title: '',
      infoForm: {},
      searchTags: [
        { label: this.$t('hostName'), prop: 'smtpHost', tag: 'DynInput' },
        { label: this.$t('portNumber'), prop: 'smtpPort', tag: 'DynInput' },
        { label: this.$t('smtpSenderAddress'), prop: 'smtpSenderAddress', tag: 'DynInput' },
        { label: this.$t('userName'), prop: 'smtpUser', tag: 'DynInput' },
        { label: this.$t('password'), prop: 'smtpPassword', tag: 'DynInput' }
      ],
      formAttrin: {
        line: false,
        labelwidth: '100px'
      },
      rules: {
        smtpHost: [
          { required: true, message: `${this.$t('pleaseInput')}${this.$t('hostName')}`, trigger: 'blur' }
        ],
        smtpPort: [
          { required: true, validator: validPort, trigger: 'blur' }
        ],
        smtpSenderAddress: [
          { validator: validEmail, required: true, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    doSave() {
      this.$refs['form'].$refs['dynForm'].validate((valid) => {
        if (valid) {
          if (this.infoForm.id) {
            // do somethings
            mailApi.doUpdate(this.infoForm).then(res => {
              this.$betterTips(res, this.handleUpdate, this.handleClose)
            })
          } else {
            mailApi.newAdd(this.infoForm).then(res => {
              this.$betterTips(res, this.handleUpdate, this.handleClose)
            })
          }
        } else {
          return false
        }
      })
    },
    handleOpen(row) {
      if (row && row.id) {
        this.title = this.$t('modify')
        this.infoForm = Object.assign({}, this.infoForm, row)
      } else {
        this.title = this.$t('add')
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['form'].$refs['dynForm'].clearValidate()
      })
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    }
  }
}
</script>
